<template>
  <div class="th-sub-menu">
    <div class="th-menu__title">
      <span class="name">{{ props.data.name }}</span>
      <b class="icon" @click="onActive" v-show="props.data.children?.length">{{ isOpen ? "&#x25b2;" : "&#x25bc;" }}</b>
    </div>
    <div class="th-menu__desc">{{ props.data.desc }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ThMenu",
});
</script>
<script lang="ts" setup>
import { PropType, ref } from "vue";

type MenuItem = {
  name: string;
  desc?: string;
  key?: string;
  children?: any[];
};

const props = defineProps({
  data: {
    type: Object as PropType<MenuItem>,
    default: () => {},
  },
});
const emits = defineEmits(["open"]);

const isOpen = ref(false);

function onActive() {
  emits("open");
  isOpen.value = !isOpen.value;
}
</script>
